<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/snap.svg-min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<svg id="svg" width="100%" height="800px">
		<polygon points="0 0, 50 0, 50 50, 0 50" fill="#06ffcb"></polygon>
		<path id="path1" d="M100 100L200 100L100 200L100 100Z" fill="#ffaa8e"></path>
		<path d="M300 300L400 300L400 400L300 300Z" fill="#ffaa8e"></path>
		<!--<path  id="circle" d="M 125, 125m -75, 0a75,75 0 1,0 150,0a75,75 0 1,0 -150,0" 
			style="stroke:#000000;fill:#f0f0f5"/>  -->
		<!--<path  id="circle" d="M 100, 100m -75, 0a75,75 0 1,0 150,0a75,75 0 1,0 -150,0" 
			style="stroke:#000000;fill:#f0f0f5"/>   
		<path  id="left" d="M25, 100   L100,100"
			style="stroke:#00ffff;"/>  
		<path id="right" d="M100, 100   L175,100"
			style="stroke:#ff00ff;"/>  
		<path id="top" d="M100, 100   L100,25"
		style="stroke:#ffff66;"/>
		<path id="bottom" d="M100, 100   L100,175"style="stroke:#ccccff;"/>-->

		</svg>
		<script type="text/javascript">
			var svg = Snap("#svg");
			var polygon = svg.select('polygon');
			polygon.animate({
				points:"0 0, 50 0, 25 25, 0 50"
			},1000)
			var path = svg.select('#path1');
			function toRect(cb) {
				path.animate({
					d:"M100 100L200 100L200 200L100 200L100 100Z",				
				},1000,null,cb)
			}
			function toCircle(cb) {
				path.animate({
					d:"M100 150 A 50 50, 0, 1, 1, 200 150 a 50 50,0,1,1,-100 0" ,				
				},1000,null,cb)
			}
			function toTriangle(cb) {
				path.animate({
					d:"M100 100L200 100L100 200L100 100Z",				
				},1000,null,cb)
			}
			function pathAnimate(...as) {
				play(as);
			}			
			function play(arr){
				if(arr.length){
					a = arr.shift();
					a.call(null,function(){
						play(arr);
					})
				}else {
					return ;
				}				
			}
			setInterval(function() {
				pathAnimate(toRect,toCircle,toRect,toTriangle)
			},4200)
			pathAnimate(toRect,toCircle,toRect,toTriangle)

			
			
		</script>	
	</body>
</html>
